<template>
<div class="bg-grey pb-40 ">
      <!--面包屑开始-->
    <div class="archive-header pt-10 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">归档</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">文章</a>
              <span rel="nofollow"></span> 归档
          </div>
          <div class="bt-1 border-color-1 mt-10 mb-20"></div>
      </div>
    </div>
    <!--面包屑结束-->
    <div class="container wow fadeInUp animated">
    <el-card class="col-md-12  hover-up transition-normal d-flex justify-content-center">
      <el-timeline>
      <el-timeline-item icon="el-icon-more"  type='primary' size="large">
      <h4>文章总览-{{total}}</h4>
    </el-timeline-item>
        <el-timeline-item color="#0bbd87" v-for="(item,index) in archives" :key="item.id" :timestamp="item.createTime" placement="top" >
        <el-card class="hover-up-2 transition-normal" style="width:100%">
           <div class="d-flex  " @click="detail">
            <div
              class="post-thumb  d-flex mr-10 border-radius-5 img-hover-scale overflow-hidden"
            >
               <el-image
                style="width: 100px; height: 100px"
                fit="cover"
                :src="item.articleCover"
               ></el-image>
            </div>
            <div class="post-content media-body pt-30" style="width: 100%">
              <h6
                class="post-title mb-15 text-limit-2-row font-medium"
                style="width: 100%"
              >
                <router-link style="width: 100%" :to="`/article/${item.id}`"
                  >{{item.articleTitle}}</router-link
                >
              </h6>
              <div
                class="entry-meta meta-1 float-left font-x-small text-uppercase"
              >
                <span class="post-by has-dot">浏览量：{{item.viewCount}}</span>
              </div>
            </div>
          </div>
        </el-card>
        </el-timeline-item>
      </el-timeline>
      <div class="">
          <el-pagination
          align="center" 
          background
          layout="prev, pager, next"
          :total="total" 
          :current-page="current"
          :page-size="size"
          @current-change="getArchives"
          style="width:100%">
      </el-pagination>
      </div>

    </el-card>
    
  </div>
</div>
  
</template>

<script>
export default {
  data() {
    return {
      archives:[],
      current: 1,
      size:3,
      total:0
    }
  },
  mounted() {
    this.getArchives(this.current,this.size);
  },
  methods:{
    detail(){
      
    },
    async getArchives(pager = 1){
      this.current = pager;
      const { current, size } = this;
      const res = await this.$API.article.getArchiveList(current, size);
      if(res.code == 200){
        const records = res.data.recordList;
        records.forEach(record => {
          record.createTime = record.createTime.replace("T", " ");
        });
        this.archives = records;
        this.total = res.data.count;
      }
      else{
        this.$message({
          message: '获取文章列表失败！',
          type: 'error'
        });
      }
    }
  }

};
</script>

<style>
</style>